<template>
  <div>
    <div>计算属性</div>
    <hr>
    <div>今年的年龄:{{age}}</div>
    <div>明年的年龄:{{age + 1}}</div>
    <div>明年的年龄:{{nextAge}}</div>
    <button @click='updateNextAge'>点击</button>
  </div>
</template>
<script>
import { computed, ref } from 'vue'

export default {
  name: 'App',
  setup () {
    // 今年的年龄
    const age = ref(20)

    // 计算属性
    const nextAge = computed({
      // 如果读取计算的值，自动调用get方法
      get () {
        return age.value + 1
      },
      // 如果修改计算属性的值，自动触发set方法
      set (v) {
        age.value = v - 1
      }
    })

    // 修改计算属性
    const updateNextAge = () => {
      nextAge.value = 15
    }

    return { age, nextAge, updateNextAge }
  }
}
</script>
